<template>
  <a-modal v-bind:visible="isShowAdd" :title="title" @ok="handleOk" :maskClosable="false" @cancel="hanldeCancel">
    <a-form-model
      ref="formRef"
      :rules="ruleForm"
      :model="formData"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <a-form-model-item label="头像" prop="avatar">
        <upImages :url.sync="formData.avatar" :signs="1"></upImages>
      </a-form-model-item>
      <a-form-model-item label="用户名" prop="username">
        <a-input v-model="formData.username" placeholder="输入用户名"></a-input>
      </a-form-model-item>
      <a-form-model-item label="密码">
        <a-input v-model="formData.password" placeholder="输入密码"></a-input>
        <span><span style="color: red">*</span> 将成为您唯一的登录名</span>
      </a-form-model-item>
      <a-form-model-item label="昵称" prop="nickname">
        <a-input v-model="formData.nickname" placeholder="请输入昵称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="role_ids">
        <a-select v-model="formData.role_ids" mode="multiple" style="width: 100%" option-label-prop="label">
          <a-select-option v-for="item in roleOption" :key="item.id" :value="item.id" :label="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="管理品牌" prop="brand_ids">
        <a-select v-model="formData.brand_ids" mode="multiple" style="width: 100%" option-label-prop="label">
          <a-select-option v-for="item in brandOption" :key="item.id" :value="item.id" :label="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <span><span style="color: red">*</span> 设置可以管理的品牌，可多选</span>
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group name="status" v-model="formData.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addUserAPI, editUserAPI } from '@/api/admin.js'
export default {
  name: 'AddAdmin',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    brandOption: {
      type: Array,
      default: () => []
    },
    roleOption: {
      type: Array,
      default: () => []
    },
    object: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    isShowAdd(boo) {
      if (boo) {
        if (Object.values(this.object).length > 0) {
          this.formData.avatar = this.object.avatar
          this.formData.ids = this.object.id
          this.formData.brand_ids = this.object.brand_ids
          this.formData.role_ids = this.object.role_ids
          this.formData.username = this.object.username
          this.formData.nickname = this.object.nickname
          this.formData.status = this.object.status
        }
      } else {
        this.$emit('update:object', {})
        this.formData = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          avatar: '',
          ids: '',
          brand_ids: undefined,
          role_ids: undefined,
          username: '', //用户名
          password: '', //密码
          nickname: '', // 昵称
          status: 1
        }
      }
    }
  },
  data() {
    return {
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        avatar: '',
        ids: '',
        brand_ids: undefined,
        role_ids: undefined,
        username: '', //用户名
        password: '', //密码
        nickname: '', // 昵称
        status: 1
      },
      ruleForm: {
        avatar: [{ required: true, message: '请上传头像' }],
        username: [{ required: true, message: '请输入用户名' }],
        nickname: [{ required: true, message: '请输入昵称' }],
        brand_ids: [{ required: true, message: '请选择管理品牌' }],
        role_ids: [{ required: true, message: '请选择角色' }]
      },
      imageUrl: '',
      loading: false
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return

        if (Object.values(this.object).length > 0) {
          try {
            const result = await editUserAPI(this.formData)
            console.log(result)
            this.$emit('upload')
            this.$emit('update:isShowAdd', false)
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        } else {
          try {
            const result = await addUserAPI(this.formData)
            console.log(result)
            this.$emit('upload')
            this.$emit('update:isShowAdd', false)
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        }
      })
    },
    hanldeCancel() {
      this.$emit('update:isShowAdd', false)
    }
  }
}
</script>

<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 100px;
  height: 100px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
v-deep .ant-row,
.ant-form-item {
  margin-bottom: 10px;
}
</style>
